<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom结构</title>
</head>
<body>
<div id="box1">

</div>

<ul id="nav">

</ul>

<select id="sltItem">
</select>

</body>
<script src="../../lib/jquery.js"></script>
<script>


    var innerBox = $('<h1>大标题</h1>');// 在内存中创建了一个虚拟dom
    $('#box1').append(innerBox);

    var navs = [{
        id: 1,
        url: '/test',
        title: '项目1'
    }, {
        id: 2,
        url: '/test2',
        title: '项目2'
    }]

    $.each(navs,function (index,item) {
       // var listItem = $('<li></li>').text(item.title);
        var listItem = $('<li></li>');
        var link = $('<a></a>').text(item.title).attr('href',item.url);
        listItem.append(link);
        $('#nav').append(listItem)
    })

    $.each(navs,function (index,item) {
        var opt = $('<option></option>').val(item.id).text(item.title);
        $('#sltItem').append(opt);

    })

     $('#sltItem').bind('change',function () {
       //  alert($(this).val());
         alert( $('#sltItem').val());
     })

</script>
</html>